<template>
    <div style="position: relative">
        <div class="bottom-title">
            {{title}}数据统计
        </div>
        <Row>
            <Col span="7">
                <div class="bottom-item-box">
                        <Row>
                            <Col span="24">
                            <div class="bottom-item">
                                <p class="bottom-item-label">总交易额</p>
                                <countTo  class="bottom-total" prefix="￥" :decimals="decimals" :startVal='0' :endVal='totalData.total' :duration=6000></countTo>
                            </div>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="12">
                            <div class="bottom-item">
                                <p class="bottom-item-label">本年交易额</p>
                                <countTo class="bottom-num" prefix="￥" :decimals="decimals" :startVal='0' :endVal='totalData.year' :duration=4000></countTo>
                            </div>
                            </Col>
                            <Col span="12">
                            <div class="bottom-item">
                                <p class="bottom-item-label">本月交易额</p>
                                <countTo prefix="￥" :decimals="decimals" :startVal='0' :endVal='totalData.mouth' :duration=4000></countTo>
                            </div>
                            </Col>
                        </Row>

                </div>
            </Col>
            <Col span="10">
            <div class="bottom-item-box">

                <Row>
                    <Col span="8">
                    <div class="bottom-item">
                        <p class="bottom-item-label">合作社</p>
                        <countTo suffix="家" :startVal='0' :endVal='totalData.hzs' :duration="daley"></countTo>
                    </div>
                    </Col>
                    <Col span="8">
                    <div class="bottom-item">
                        <p class="bottom-item-label">配送商</p>
                        <countTo suffix="家" :startVal='0' :endVal='totalData.pss' :duration="daley"></countTo>
                    </div>
                    </Col>
                    <Col span="8">
                    <div class="bottom-item">
                        <p class="bottom-item-label">种植规模</p>
                        <countTo suffix="亩" :startVal='0' :endVal='totalData.zzgm' :duration="daley"></countTo>
                    </div>


                    </Col>
                    <Col span="8">
                    <div class="bottom-item">
                        <p class="bottom-item-label">养殖规模</p>
                        <countTo suffix="头" :startVal='0' :endVal='totalData.yzgm' :duration="daley"></countTo>
                    </div>

                    </Col>
                    <Col span="8" offset="8">
                    <div class="bottom-item">
                        <p class="bottom-item-label">涉贫困户</p>
                        <countTo suffix="户" :startVal='0' :endVal='totalData.pkh' :duration="daley"></countTo>
                    </div>
                    </Col>
                </Row>
            </div>
            </Col>
            <Col span="7">
            <div class="bottom-item-box">
                <Row>
                    <Col span="8">
                    <div class="bottom-item">
                        <p class="bottom-item-label">学校数据</p>
                        <countTo :startVal='0' :endVal='totalData.school' :duration="daley"></countTo>
                    </div>
                    </Col>
                    <Col span="8" offset="8">
                    <div class="bottom-item">
                        <p class="bottom-item-label">学生数据</p>
                        <countTo :startVal='0' :endVal='totalData.people' :duration="daley"></countTo>
                    </div>


                    </Col>
                    <Col span="8">
                    <div class="bottom-item">
                        <p class="bottom-item-label">幼儿人数</p>
                        <countTo :startVal='0' :endVal='totalData.ye' :duration="daley"></countTo>
                    </div>


                    </Col>
                    <Col span="8">
                    <div class="bottom-item">
                        <p class="bottom-item-label">小学人数</p>
                        <countTo :startVal='0' :endVal='totalData.xx' :duration="daley"></countTo>
                    </div>


                    </Col>
                    <Col span="8">
                    <div class="bottom-item">
                        <p class="bottom-item-label">初中人数</p>
                        <countTo :startVal='0' :endVal='totalData.cz' :duration="daley"></countTo>
                    </div>


                    </Col>
                </Row>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    export default {
        name:'bottomTotal',
        components: {
        },
        props: {
            bottomTitle:{
                type: String,
                default: ''
            }

        },
        data () {
            return {
                title:'',
                decimals:2,
                daley:4000,
                totalData:{
                    total:624803266.33,
                    year:9781.25,
                    mouth:781.55,
                    hzs:150,
                    pss:150,
                    zzgm:15540,
                    yzgm:15540,
                    pkh:15540,
                    school:15540,
                    people:15540,
                    ye:15540,
                    xx:15540,
                    cz:15540
                }
            }
        },
        computed: {
        },
        watch: {
            // 如果 `bottomTitle` 发生改变，这个函数就会运行，监听变化状态，改变title值及请求数据
            bottomTitle: function (newQuestion, oldQuestion) {
                if(newQuestion===oldQuestion) return false;
                let _this=this;
                switch (newQuestion){
                    case 'tongren':
                        _this.title='铜仁市';
                        break;
                    case 'kaili':
                        _this.title='凯里市';
                        break;
                    case 'zunyi':
                        _this.title='遵义市';
                        break;
                    case 'liupanshui':
                        _this.title='六盘水市';
                        break;
                    case 'bijie':
                        _this.title='毕节市';
                        break;
                    case 'za':
                        _this.title='正安县';
                        break;
                    case 'rhs':
                        _this.title='仁怀市';
                        break;
                    case 'bjq':
                        _this.title='碧江区';
                        break;
                    case 'ws':
                        _this.title='万山区';
                        break;
                    case 'st':
                        _this.title='松桃县';
                        break;
                    case 'jk':
                        _this.title='江口县';
                        break;
                    case 'yp':
                        _this.title='玉屏县';
                        break;
                    case 'yj':
                        _this.title='印江县';
                        break;
                    case 'sn':
                        _this.title='思南县';
                        break;
                    case 'sq':
                        _this.title='石阡县';
                        break;
                    case 'dj':
                        _this.title='德江县';
                        break;
                    case 'yh':
                        _this.title='沿河县';
                        break;
                    case 'zyx':
                        _this.title='镇远县';
                        break;
                    case 'mjx':
                        _this.title='麻江县';
                        break;
                    case 'js':
                        _this.title='金沙县';
                        break;
                    case 'df':
                        _this.title='大方县';
                        break;
                    case 'lz':
                        _this.title='六枝特区';
                        break;
                }
                this.totalData={
                    total:this.totalData.total+100,
                        year:9781.25,
                        mouth:781.55,
                        hzs:150,
                        pss:150,
                        zzgm:15540,
                        yzgm:15540,
                        pkh:15540,
                        school:15540,
                        people:15540,
                        ye:15540,
                        xx:15540,
                        cz:15540
                }
//                this.axios.get(api).then((response) => {
//                    console.log(response.data)
//                })
                console.log(newQuestion,oldQuestion)
            }
        },
        methods: {
            init(){
                let _this=this;
//                用于初始化数据展示区县级路径返回时状态的保存
                switch (this.bottomTitle){
                    case 'tongren':
                        _this.title='铜仁市';
                        break;
                    case 'kaili':
                        _this.title='凯里市';
                        break;
                    case 'zunyi':
                        _this.title='遵义市';
                        break;
                    case 'liupanshui':
                        _this.title='六盘水市';
                        break;
                    case 'bijie':
                        _this.title='毕节市';
                        break;

                    case 'bjq':
                        _this.title='碧江区';
                        break;
                    case 'ws':
                        _this.title='万山区';
                        break;
                    case 'st':
                        _this.title='松桃县';
                        break;
                    case 'jk':
                        _this.title='江口县';
                        break;
                    case 'yp':
                        _this.title='玉屏县';
                        break;
                    case 'yj':
                        _this.title='印江县';
                        break;
                    case 'sn':
                        _this.title='思南县';
                        break;
                    case 'sq':
                        _this.title='石阡县';
                        break;
                    case 'dj':
                        _this.title='德江县';
                        break;
                    case 'yh':
                        _this.title='沿河县';
                        break;
                    case 'za':
                        _this.title='正安县';
                        break;
                    case 'rhs':
                        _this.title='仁怀市';
                        break;
                    case 'zyx':
                        _this.title='镇远县';
                        break;
                    case 'mjx':
                        _this.title='麻江县';
                        break;
                    case 'js':
                        _this.title='金沙县';
                        break;
                    case 'df':
                        _this.title='大方县';
                        break;
                    case 'lz':
                        _this.title='六枝特区';
                        break;
                }
            }
        },
        mounted () {
//            this.init()
        },
        created(){
            this.init()
        }
    }

</script>
<style type="text/css">
</style>